
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>带透明背景的炫酷简洁导航效果</title>
<style type="text/css">
.menu {height:30px;padding:0 10px;border-bottom:5px solid #000000;background-color:#333333;}
.menu a {float:left;height:35px;overflow:hidden;padding:0 10px;margin-right:10px;line-height:35px;text-decoration:none;font-size:13px;color:#99CC29;background:transparent;}
.menu a:hover,
.menu a.current,
.menu a.current:hover {height:35px;color:#EFEFEF;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#4C99CC29', endColorstr='#4C99CC29');background:rgba(153,204,41,0.3);text-shadow:-1px -1px 0 #333333;box-shadow:0 0 5px #99CC29;}
</style>
</head>

<body>
<div class="menu"><a href="###" target="_blank">首页</a> <a href="###" class="current" target="_blank">菜单1</a> <a href="###" target="_blank">菜单2</a> <a href="###" target="_blank">菜单3</a></div>
</body>
</html>
